<script setup lang="ts">
// vue2和vue3 父传子 和子传父 完整写法类似
// vue2 父传子   <Son :money="money"></Son> 子组件内部 props接收　　
// 子传父  this,$emit('xxx', value)   父组件 <Son :money="money" @xxx="处理函数"></Son> 
//  添加.sync修饰符后 子组件正常接收数据, 发布自定义事件 this.$emit('update:属性名', 值)
//-----------------------
// vue3  父传子   <Son :money="money"></Son> 子组件内部 defineProps接收
// 子传父  defineEmits() emit('xxx', value) 父组件 <Son :money="money" @xxx="处理函数"></Son> 子组件内部 defineProps接收
// vue3中.sync被废弃, 用v-model:属性名="属性"
import { ref } from 'vue'
import Son from './son.vue'
const money = ref(100)
const changeFn = (value: number) => {
  money.value = value
}
</script>
<template>
  <div style="border: 2px solid #000; margin: 20px">
    父组件
    <!-- <Son :money="money" @changeFn="changeFn"></Son> -->
    <!-- vue2 .sync写法 -->
    <!-- <Son :money.sync="money"></Son> -->
    <Son v-model:money="money"></Son>
  </div>
</template>
<style scoped>
</style>